<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>CSS3动画示例</title>
		<style>
			* {
				margin: 0;
				padding: 0
			}

			section {
				width: 100px;
				height: 100px;
				background-color: coral;
				position: relative;
				animation: anim 3s infinite alternate;
				-webkit-animation: anim 3s infinite alternate;
				-moz-animation: anim 3s infinite alternate;
				-o-animation: anim 3s infinite alternate;
				margin: 50px auto;
			}

			@keyframes anim {
				0% {
					background-color: red;
					left: 0;
					top: 0;
				}

				25% {
					background-color: green;
					left: 100px;
					top: 0;
				}

				50% {
					background-color: blue;
					left: 100px;
					top: 100px;
				}

				75% {
					background-color: yellow;
					left: 0;
					top: 100px;
				}

				100% {
					background-color: purple;
					left: 0;
					top: 0;
				}
			}

			@-webkit-keyframes anim {
				0% {
					background-color: red;
					left: 0;
					top: 0;
				}

				25% {
					background-color: green;
					left: 100px;
					top: 0;
				}

				50% {
					background-color: blue;
					left: 100px;
					top: 100px;
				}

				75% {
					background-color: yellow;
					left: 0;
					top: 100px;
				}

				100% {
					background-color: purple;
					left: 0;
					top: 0;
				}
			}

			@-moz-keyframes anim {
				0% {
					background-color: red;
					left: 0;
					top: 0;
				}

				25% {
					background-color: green;
					left: 100px;
					top: 0;
				}

				50% {
					background-color: blue;
					left: 100px;
					top: 100px;
				}

				75% {
					background-color: yellow;
					left: 0;
					top: 100px;
				}

				100% {
					background-color: purple;
					left: 0;
					top: 0;
				}
			}

			@-o-keyframes anim {
				0% {
					background-color: red;
					left: 0;
					top: 0;
				}

				25% {
					background-color: green;
					left: 100px;
					top: 0;
				}

				50% {
					background-color: blue;
					left: 100px;
					top: 100px;
				}

				75% {
					background-color: yellow;
					left: 0;
					top: 100px;
				}

				100% {
					background-color: purple;
					left: 0;
					top: 0;
				}
			}
		</style>
	</head>
	<body>
		<section></section>
	</body>
</html>
